<template>
  <div>
    <data-table
      ref="roleTable"
      :value="tableData"
      :has-action="true"
      :table-column-attributes="tableColumnAttributes"
      :width="160"
      :isShowPage="true"
      :isShowSelection="true"
      :hasAction="false"
      :totalCount="totalCount"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      @selection-change="selectionChange"
      @row-click="clickRow"
    ></data-table>
    <div style="text-align: center">
      <el-button
        type="primary"
        @click="selectOnClick"
      >确定</el-button>
    </div>
  </div>
</template>
<script>
import baseMixin from '@/mixins/base'
import { dataList } from '@/api/after-sale/systemManage/role'
export default {
  mixins: [
    baseMixin({
      idName: 'id',
      findData: dataList,
      dataName: ['content', 'totalRecords'],
    }),
  ],
  props: {
    checkList: {
      type: Array,
      default: () => {
        return []
      },
    },
  },
  data () {
    return {
      //table字段
      tableColumnAttributes: [
        {
          name: '职位所属门店',
          value: 'storeName',
          type: 'text',
        },
        {
          name: '职位名称',
          value: 'roleName',
          type: 'text',
        },
        {
          name: '任职数',
          value: 'activeStaff',
          type: 'text',
        },
        {
          name: '职位权限',
          value: 'roleAuth',
          type: 'text',
        },
        // {
        //   name: '备注',
        //   value: 'roleDesc',
        //   type: 'text',
        // },
        // {
        //   name: '创建时间',
        //   value: 'createTime',
        //   type: 'text',
        // },
      ],
      sleect: [],
    }
  },
  watch: {
    tableData: {
      handler (newVal, oldVal) {
        setTimeout(() => {
          //设置表格的选中状态 延时5毫秒等待表格渲染完成
          this.filterData(newVal).forEach((row) => {
            console.log(this.$refs.roleTable.$refs.multipleTable)
            this.$refs.roleTable.$refs.multipleTable.toggleRowSelection(
              row,
              true
            )
          })
        }, 300)
      },
      deep: true,
    },
  },
  methods: {
    clickRow (row) {
      let _select = this.sleect, t = true;
      if (_select.length > 0) {
        _select.map(item => {
          if (item.id == row.id) {
            t = false;
          }
        })
      }
      this.$refs.roleTable.$refs.multipleTable.toggleRowSelection(row, t);
    },
    //过滤选中的数据
    filterData (data) {
      return data.filter((item) => {
        for (let index = 0; index < this.checkList.length; index++) {
          if (item.id == this.checkList[index]) {
            return item
          }
        }
      })
    },
    selectOnClick () {
      this.$emit('roleIdListSelectCheck', this.sleect)
    },
    selectionChange (sleect) {
      this.sleect = sleect
    },
  },
}
</script>
